import React, { Component } from "react";
import { TreeSelect, DataSet, Form } from "choerodon-ui/pro";
import { FieldProps } from "choerodon-ui/pro/lib/data-set/Field";
import { Button } from "choerodon-ui/pro";

import { isLeaf } from "../../utils/tree";

export default class AsyncTree extends Component {
  optionsDs = new DataSet({
    dataKey: "data",
    autoQuery: true,
    idField: "id",
    parentField: "parentId",
    transport: {
      read() {
        return {
          method: "GET",
          url: `https://www.fastmock.site/mock/79366917e4ba9130420b04996b8c3a73/mock/asynctree`,
        };
      },
    },
  });
  ds = new DataSet({
    autoQuery: true,
    fields: [
      {
        name: "businessUnit",
        label: "业务单元",
        type: "object",
        textField: "name",
        valueField: "id",
        ignore: "always",
        options: this.optionsDs,
      },
      {
        name: "businessUnitGid",
        bind: "businessUnit.id",
      },

      {
        name: "businessUnitName",
        bind: "businessUnit.name",
      },
    ] as FieldProps[],
  });
  /**
   * @description: 查看optionds中的数据
   * @param {*}
   * @return {*}
   */

  printOptionDs = () => {
    console.log("options", this.optionsDs.toData());
  };
  render() {
    return (
      <>
        {/* @ts-ignore */}
        <Form dataSet={this.ds}>
          {/* @ts-ignore */}
          <TreeSelect name='businessUnit' async onOption={isLeaf}></TreeSelect>
        </Form>
        <Button onClick={this.printOptionDs}>查看选项的数据</Button>
      </>
    );
  }
}
